import React, { useState, useEffect } from 'react';
import Export from '../Strategy/Exportcomponent/export'
import storage from '../../../utils/storage';
import services from '../../../services/api';
import { APIUrl } from '../../../services/createServices';
import {Tooltip,message} from 'antd';
export default function(props) {
  const [list, setList] = useState([]);
  const [remarks, setRemark] = useState([]);
  const [exportData, setExportData] = useState({})
  useEffect(() => {
    getExportData(storage.strategyExportMsg)
      return () => {
        storage.strategyExportMsg = {}; // 注销组件时，清空storage.strategyExport
      };
  }, []);
  // 下载数据
  function exportFn(params) {
    const urls = `${APIUrl}/strategy-template/export-file?strategy_template_ids=${params.strategy_template_ids.join()}`
    window.open(urls, '_black');
  }
  // 请求数据
  function getExportData(value) {
    const params = {
      'strategy_template_ids': value.selectedRowKeys
    }
    setExportData(params)
    services.template.export(params).then(res => {
       if (!res.code) {
         setList(res.data.templates)
         setRemark(res.data.remarks)
       }
    }).catch(err => {
      message.error(err);
    })
  };
  const columns = [
    {
      title: '序号',
      render: (text, record, index) => {
        return <>{index + 1}</>;
      }
    },
    {
      title: '模板名称',
      key: 'name',
      dataIndex: 'name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        width: 200,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
  ];
  const remarkColumns = [
    {
      title: '序号',
      render: (text, record, index) => {
        return <>{index + 1}</>;
      }
    },
    {
      title: '项目',
      key: 'name',
      dataIndex: 'name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '描述',
      key: 'value',
      dataIndex: 'value',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={(text.length&&text.join()) || '-'} placement='topLeft'>
            {(text.length&&text.join()) || '-'}
          </Tooltip>
        );
      }
    },
  ]
  return (
    <Export
      columns={columns}
      data={list}
      remarks={remarks}
      remarkColumns={remarkColumns}
      exportParams={exportData}
      des={'系统会自动将策略模板使用的指标、字段一并导出'}
      exportPage={exportFn}
      actionType={'template'}
      isExportHandle={true}
    >
    </Export>
   )
}